<template>
  <div class="listPage">
    <div class="listHead">
      <p>导航栏</p>
    </div>
    <div class="list-c">
      <div class="list-cbox">
        <span>消费级产品</span>
        <p>你也能成摄影大师</p>
      </div>
    </div>
    <div class="list-b">
      <h1>御 Mavic 系列</h1>
      <div class="prolist">
        <div class="prolist-box">
          <h1>御 Mavic 系列</h1>
          <ul>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
          </ul>
          <div class="morebox">
            <span>立即购买</span>
            <span>了解更多></span>
          </div>
        </div>
      </div>
    </div>

    <div class="list-b">
      <div class="prolist">
        <div class="prolist-box">
          <h1>御 Mavic 系列</h1>
          <ul>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
          </ul>
          <div class="morebox">
            <span>立即购买</span>
            <span>了解更多></span>
          </div>
        </div>
      </div>
    </div>

    <div class="list-b">
      <div class="prolist">
        <div class="prolist-box">
          <h1>御 Mavic 系列</h1>
          <ul>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
            <li>三项环境感知</li>
          </ul>
          <div class="morebox">
            <span>立即购买</span>
            <span>了解更多></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "prduct-list"
  }
</script>

<style lang="scss" scoped>
  .listPage {
    background: #f2f2f2;
    .listHead {
      width: 100%;
      height: 65px;
      background: rebeccapurple;
      > p {
        font-size: 20px;
        text-align: center;
        line-height: 65px;
      }
    }
    .list-c {
      width: 100%;
      height: 400px;
      background: #007aff;
      .list-cbox {
        padding-top: 170px;
        padding-left: 170px;
        > span {
          display: block;
          font-size: 30px;
          font-weight: 700;
          margin-bottom: 20px;
        }
      }
    }
    .list-b {
      margin-top: 30px;
      > h1 {
        text-align: center;
      }
      .prolist {
        width: 1200px;
        height: 480px;
        background: yellow;
        margin: 0 auto;
        .prolist-box {
          padding-left: 80px;
          padding-top: 185px;
          > h1 {
            margin: 0;
          }
          > ul {
            display: flex;
            margin: 30px 0;
            > li {
              margin-right: 10px;
            }
          }
          .morebox {
            span:nth-child(1) {
              display: inline-block;
              width: 128px;
              height: 46px;
              background: #3c3e40;
              text-align: center;
              line-height: 46px;
              border-radius: 5px;
              color: white;
              cursor: pointer;
            }
            span:nth-child(2) {
              display: inline-block;
              width: 128px;
              height: 46px;
              text-align: center;
              line-height: 46px;
              font-weight: 700;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
